<template>
    <div>
        <div class="page_top">
            <div class="left_btn" @click="back">
                <img src="../../assets/image/back.png" alt=""/>
            </div>
            <crumbs basetitle="保险" title="在保证明" title1=""></crumbs>
        </div>
        <div class="w-full box-border p-16px">
            <div class="w-full bg-#ffffff rounded-4px box-border p-16px mb-16px">
                <filterComponentPro noEmit v-model:filter-data="filterData" @doSearch="handleSearch">
                </filterComponentPro>
            </div>
            <div class="w-full bg-#ffffff rounded-4px box-border p-16px">
                <tableComponent class="set-height" :table-header="tableHeader" :table-data="tableData"
                                v-model:page-info="pageInfo" @pageChange="handlePageChange">
                    <template #operate>
                        <el-table-column prop="operate" label="操作" width="120" align="center" fixed="right">
                            <template #default="scope">
                                <div class="w-full box-border flex items-center justify-around">
                                    <el-icon :size="14">
                                        <Delete/>
                                    </el-icon>
                                    <el-icon :size="14">
                                        <Download/>
                                    </el-icon>
                                    <div class="w-30px">
                                        <bigPicture text="查看" align="center"
                                                    :imageUrl="'https://bullet001.oss-cn-shanghai.aliyuncs.com/file/payManagerd8e7005f-fca2-4af9-89e2-5c6fc6900728.jpg'"/>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </template>
                </tableComponent>
            </div>
        </div>
    </div>
</template>

<script setup>
import crumbs from '@/components/crumbs.vue'
import bigPicture from '@/components/bigPicture/index.vue'
import filterComponentPro from '@/components/filterComponentPro/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import {Delete, Download} from '@element-plus/icons-vue'
import {ref} from 'vue'

const filterData = ref({
    list: {
        companyId: {
            name: '客户ID',
            prop: 'companyId',
            value: '',
            placeholder: '请输入客户ID',
            type: 'input',
            inputType: 'text'
        },
        companyName: {
            name: '客户名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入客户名称',
            type: 'input',
            inputType: 'text'
        },
        insureCompany: {
            name: '保险公司',
            prop: 'insureCompany',
            value: '',
            placeholder: '请选择保险公司',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '日日保',
                    value: 0
                },
                {
                    label: '电子签',
                    value: 2
                },
                {
                    label: '长期保',
                    value: 3
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
        month: {
            name: '应用月份',
            type: 'date',
            dateType: 'daterange',
            value: '',
            valueFormat: 'YYYY-MM-DD',
        },
        isSync: {
            name: '生效方式',
            prop: 'isSync',
            value: '',
            placeholder: '请选择生效方式',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '否',
                    value: 0
                },
                {
                    label: '是',
                    value: 1
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            }
        },
    },
    utilButtonList: [
        // {
        //     icon: '',
        //     name: '批量处理',
        //     click: () => {
        //     }
        // }
    ]
})
const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableHeader = ref([
    {
        label: '客户ID',
        prop: 'companyId',
        width: 120
    },
    {
        label: '客户名',
        prop: 'companyName',
        width: 200
    },
    {
        label: '在保区间',
        prop: 'adminName',
        width: 200
    },
    {
        label: '保险公司',
        prop: 'isOpenPaySalary',
        width: 200
    },
    {
        label: '保险方案',
        prop: 'isOpenPaySalary1',
        width: 200
    },
    {
        label: '保险人数',
        prop: 'isOpenPaySalary2',
        width: 200
    },
    {
        label: '生成方式',
        prop: 'isOpenPaySalary3',
        width: 200
    },
    {
        label: '申请人',
        prop: 'isOpenPaySalary4',
        width: 200
    },
    {
        label: '操作时间',
        prop: 'isOpenPeriod',
        width: 200
    },
    {
        label: '操作',
        prop: 'operate'
    }
])
const tableData = ref([1])
const handleSearch = () => {
    console.log('搜索')
    getData()
}
const handlePageChange = () => {
    console.log('分页')
    getData()
}
const getData = () => {
    console.log('获取数据')
}
const back = () => {
    window.history.back()
}
</script>

<style lang="scss" scoped></style>